<template>
  <div class="UserTitleCon">
    <div>
      <ImageBox :src="Img" size="22px" radius="50%"></ImageBox
      ><span>南国-小豆豆</span>
    </div>
    <router-link to="/usermsg">
      <div>
        <Icon type="icon-shuxie"></Icon><span>高考成绩</span>
      </div></router-link
    >
  </div>
</template>

<script>
import Img from "@/assets/dog.jpg";
import ImageBox from "@/components/ImageBox.vue";
import Icon from "@/components/Icon.vue";
export default {
  data() {
    return {
      Img,
    };
  },
  components: {
    Icon,
    ImageBox,
  },
};
</script>

<style lang="less" scoped>
.UserTitleCon {
  padding: 5px 20px;
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;

  div {
    &:nth-child(1) {
      display: flex;
      align-items: center;
      font-weight: 700;
      span {
        padding-left: 8px;
      }
    }
    &:last-child {
      background-color: #2a6eee;
      display: flex;
      align-items: center;
      color: #fff;
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 12px;
      span {
        padding-left: 5px;
      }
    }
  }
}
</style>